<template>
	<view class="my-award">
		<image class="top-img" :src="fulidibu" mode="widthFix"></image>
		<view class="m-a-boy">
			<view class="m-a-box">
				<view class="a-b-title">
					<image class="b-t-img" :src="fuli" mode=""></image>
					<text class="b-t-text">员工福利</text>
				</view>
				<view class="u-parse" >
					<u-parse :content="data" ></u-parse>
				</view>
				<view class="u-input">
						<uni-forms-item label="收货地址" required label-width="75px">
							<uni-easyinput v-model="address" placeholder="请输入收货地址" />
						</uni-forms-item>
					<button class="but" type="primary" size="mini" @click="submit('valiForm')">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fulidibu:`${getApp().globalData.imgScr}bj/fulidibu.jpg`,
				fuli:`${getApp().globalData.imgScr}bj/fuli.png`,
				data:'加载中...', // 员工福利	
				// 校验表单数据
				address:uni.getStorageSync('cleaningData').address || '',
				}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			/**
			 * 请求奖励政策
			 */
			async getData(){
				try{
					let res = await this.$http.get('/index/Communal/config_data',{config_id:9})
					// this.data = res.welfare.value.replace(/src="\//g, 'class="img-14" src="https://www.zhuoxianrenli.cn/' ) || '暂无数据！';
					this.data = res.welfare.value.replace(/src="\//g, `class="img-14" src="${getApp().globalData.url}` ) || '暂无数据！';
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 提交收货地址
			 */
			async submit() {
				if(this.address == '') return uni.showToast({
					icon:"none",
					title: '收货地址不能为空！'
				})
				try{
					let res = await this.$http.post('/index/Login/update_userinfo',{
						address:this.address
					})
					uni.showToast({
						icon:"none",
						title: '收货地址更新成功！'
					})
				}catch(e){
					//TODO handle the exception
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #ff7927;
	}
.my-award {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	// 背景图片样式
	.top-img {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	// 中间数据展示栏样式
	.m-a-boy {
		position: absolute;
		bottom: 64rpx;
		left: 50%;
		transform: translateX(-50%);
		// 内容样式
		.m-a-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 684rpx;
			height: 860rpx;
			background-color: #ffffff;
			border-radius: 14rpx;
			overflow: hidden;
			// 标题样式
			.a-b-title {
				position: relative;
				display: flex;
				width: 266rpx;
				.b-t-img {
					width: 100%;
					height: 78rpx;
				}
				.b-t-text {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					font-size: 34rpx;
					font-weight: 600;
					color: #FFFFFF;
					white-space: nowrap;
				}
			}
			.u-parse {
				box-sizing: border-box;
				flex: 1;
				width: 100%;
				padding: 20rpx 40rpx;
				overflow: auto;
			}
			::v-deep .u-input {
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				width: 100%;
				padding: 0 32rpx;
				margin: 8rpx 0 16rpx;
				.uni-forms-item__inner {
					padding: 0;
				}
				.uni-forms-item__content {
					width: 290rpx;
				}
				.but {
					width: 136rpx;
					margin: 0;
					box-sizing: border-box;
					font-size: 28rpx;
					color: #FFFFFF;
					background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
					border-radius: 34rpx;
					line-height: 68rpx;
					border: 0;
				}
			}
		}
	}
}
</style>